<template>
  <div class="clear-fix k-btn-wrap">
    <ul
      class="fl num-ul"
    >
      <li
        v-for="(row, idx) in cp_board.ordinary"
        :key="idx"
        class="clear-fix k-row"
        :class="{['k-row-' + cp_board.ordinary.length]: 1}"
      >
        <span
          v-for="(btn, i) in row"
          :key="i"
          class="fl k-btn"
          :class="['k-' + btn.type, 'k-btn-' + cp_board.ordinary[0].length, {active: active === `l_${idx}_${i}`, disable: disableBtn.includes(btn.expect)}]"
          @touchend.stop="btnClick($event, btn)"
          @mouseup.stop="btnClick($event, btn)"
          @touchstart.stop="active = `l_${idx}_${i}`"
          @mousedown.stop="!mobile && (active = `l_${idx}_${i}`)"
        ><span>{{ btn.view || btn.text }}</span>
          <span class="k-btn-bg"></span>
        </span>
      </li>
    </ul>
    <ul
      class="fr sym-ul sym-pad"
    >
      <li
        v-for="(row, idx) in cp_board.large"
        :key="idx"
        class="k-row"
        :class="{['k-row-' + cp_board.large.length]: 1}"
      >
        <template v-for="(btn, i) in row">
          <span
            v-if="btn.expect === 'delete'"
            :key="i"
            class="k-btn"
            :class="['k-' + btn.type, 'k-btn-' + cp_board.large[0].length, {active: active === `r_${idx}_${i}`, disable: disableBtn.includes(btn.expect)}]"
            @touchstart.stop="deleteStart($event, btn, `r_${idx}_${i}`)"
            @mousedown.stop="deleteStart($event, btn, `r_${idx}_${i}`)"
            @touchend.stop="pressUp($event, btn)"
            @mouseup.stop="pressUp($event, btn)"
            @click.stop="pressClick($event, btn)"
          >
          <span class="k-btn-bg"></span></span>
          <span
            v-else
            :key="i"
            class="k-btn"
            :class="['k-' + btn.type, 'k-btn-' + cp_board.large[0].length, {active: active === `r_${idx}_${i}`, disable: disableBtn.includes(btn.expect)}]"
            @touchstart.stop="active = `r_${idx}_${i}`"
            @touchend.stop="btnClick($event, btn)"
            @mousedown.stop="!mobile && (active = `r_${idx}_${i}`)"
            @mouseup.stop="btnClick($event, btn)"
          >{{ btn.view || btn.text }}</span>
        </template>
      </li>
    </ul>
    <span class="iconfont icon-sqrt2" />
  </div>
</template>

<script>
/******************/
/******************/
// region    //import
import { KeepPress } from './index';
import { browerEnv } from './utils';

// endregion

/******************/
/******************/
// region    //initialize

// endregion

/******************/
/******************/
// region    //export

export default {
    name: 'TheNumber',
    props: {
        boardData: {
            type: Object,
            required: true,
        },
        payload: {
            type: Object,
            default () {
                return {};
            },
        },
        disableBtn: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data () {
        let press = new KeepPress();
        return {
            pressDown: press.down(($event, data) => {
                this.$emit('keep-press', $event, data);
                this.active = '';
            }, 1000),
            pressUp: press.up((e, data, cls) => {
                if (this.mobile) {
                    let { type } = e || window.event;
                    if (type.match(/mouse/g)) {
                        return false;
                    }
                }
                this.active = '';
                this.$emit('btn-click', e, data);
            }),
            pressClick: press.click(($event, data) => {
                this.active = '';
                this.$emit('btn-click', $event, data);
            }),
            active: '',
            mobile: browerEnv().android || browerEnv().ios, // 是否是移动端
        };
    },
    computed: {
        cp_board () {
            let { ordinary, large, defaultSymbol } = this.boardData.keysText;
            let i = 0; let len = ordinary.length;
            let result = Object.entries(defaultSymbol).map(([k, v]) => {
                return Object.assign({}, v, { text: k });
            });
            return {
                ordinary: ordinary.map((arr, idx) => {
                    let res = [...arr];
                    if (idx === len - 1) {
                        res.unshift(result[i++], result[i++], result[i++]);
                        res.push(...result.slice(i));
                    } else {
                        res.unshift(result[i++], result[i++]);
                        res.push(result[i++], result[i++]);
                    }
                    return res;
                }),
                large,
            };
        },
    },
    methods: {
        btnClick (e, data) {
            if (this.mobile) {
                let { type } = e || window.event;
                if (type.match(/mouse/g)) {
                    return false;
                }
            }
            this.$emit('btn-click', e, data);
            this.active = '';
        },
        deleteStart ($event, btn, cls) {
            if (this.mobile) {
                let { type } = $event || window.event;
                if (type.match(/mouse/g)) {
                    return false;
                }
            }
            this.active = cls;
            this.pressDown($event, btn);
        },
    },
};

// endregion

/******************/
/******************/
// region    //function

// endregion

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

  .num-ul, .sym-pad {
    height: 100%;
  }

  .k-btn-box {
    z-index: 0;
  }
  .sym-ul {
    width: calc((100% - 56px) / 8 + 8px);
  }
  .num-ul {
    width: calc((100% - 56px) / 8 * 7 + 48px);
  }
</style>
